<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/top.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/login-ti.css">
  <link rel="stylesheet" href="css/top-hover.css">
  <title>服饰毛绒</title>
  <style>
    /* 手办 */
    .relative-shouban {
      position: relative;
      left: 0;
      top: 124px;

    }

    .shouban {
      /* background-color: rgb(40, 196, 243); */
      box-sizing: border-box;
      padding: 20px;
    }

    .shouban a {
      color: rgb(0, 0, 0);
    }

    .shouban a:nth-of-type(1):hover {
      text-decoration: underline;
    }

    body,
    html {
      height: 100%;
    }

    .column-main {
      display: flex;
      overflow: hidden;
      /* height: 100%; */
    }

    .main-left {
      width: 20%;

      /* background-color: rgb(46, 131, 20); */
    }

    .main-right {
      width: 80%;

      /* background-color: rgb(240, 123, 13); */
    }

    .top-f ul li:nth-child(3) a {
      color: #f94915;
      font-weight: 700;
    }

    .top .top-f ul li:nth-child(1) a {
      color: #ffffff;
      font-weight: 400;
    }

    .bg-shouban {
      font-size: 0;
      width: 100%;
      /* height: 40%; */
    }

    .bg-shouban img {
      width: 100%;
      /* height: 100%; */
    }

    html,
    body {

      height: 100%;
    }

    .main-left a {
      color: rgb(17, 17, 17);
      /* font-size: 14px; */
    }

    .main-left ul li {
      line-height: 30px;
    }

    .main-left ul li:nth-child(1) a {
      font-size: 28px;
      font-weight: 700;
      position: relative;
    }

    .main-left ul li:nth-child(1) a::before {
      content: '';
      width: 3px;
      height: 28px;
      background-color: #000;
      position: absolute;
      left: -16px;
      top: 6px;
    }

    .main-left {
      box-sizing: border-box;
      padding-left: 60px;
      padding-top: 10px;
    }

    .main-left ul {
      margin-top: 30px;
    }


    /* main-right */

    .main-renqi select {
      width: 120px;
      height: 30px;
      font-size: 20px;
      text-align: center;
      outline: none;
    }

    .main-renqi li:first-child input {
      width: 20px;
      height: 20px;
      vertical-align: middle;

    }

    .main-renqi li:nth-child(2) input {
      height: 30px;
      width: 20px;
      outline: none;
    }

    .main-renqi li:nth-child(2) input:first-child,
    .main-renqi li:nth-child(2) input:last-child {
      width: 50px;
    }

    .main-renqi ul:nth-child(1) {
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      margin-top: 40px;
      padding-bottom: 30px;
    }



    .lists ul {
      display: flex;
      flex-wrap: wrap;
      /* line-height: 10%; */
      box-sizing: border-box;
    }

    .lists ul li {
      box-sizing: border-box;
      width: 33%;
      height: 300px;
      text-align: center;
      /* line-height: 20%; */

    }

    .lists ul li p:nth-child(1) {
      width: 100%;
      height: 80%;
    }

    .lists ul li p img {
      width: 100%;
      height: 100%;
      background-color: rgb(21, 209, 209);
    }

    .lists ul li a {
      color: black;
    }

    .renqi-active {
      background-color: #aeb2b3;
      color: white;
      font-size: 16px;
    }


    /* 新品 */
    .lists ul li:nth-child(1),
    .lists ul li:nth-child(2),
    .lists ul li:nth-child(3) {
      position: relative;
    }

    .lists ul li:nth-child(1)::before,
    .lists ul li:nth-child(2)::before,
    .lists ul li:nth-child(3)::before {
      content: '';
      width: 20%;
      height: 20%;
      background-image: url(img/new.png);
      /* background-position: ; */
      background-size: 100%;
      position: absolute;
      left: 30px;
      top: 0;
    }
  </style>
</head>

<body>

  <div class="top">
    <div class="bg-top">
      <ul class="top-left">
        <li></li>
        <li>
          <a href="#">北京地区暂停发货说明，点击查看详情></a>
        </li>
      </ul>
      <ul class="top-right">
        <li class="log-btn"><a href="#">你好，请登录</a></li>
        <li><a href="shoppingCart.html"><span></span> 购物车 <span class="Product-num">0</span></a></li>
        <li><a href="#"> <span></span>领取中心</a></li>
        <li><a href="#"> <span></span>微信商城</a></li>
      </ul>


    </div>
    <div class="top-f">
      <ul>
        <li><a href="index.html" class="top-f-active"> 商城首页</a></li>
        <li class="show">
          <a href="shouban.html"> 雕塑手办</a>
          <div class="hide1">
            <p><a href="#">大型雕塑</a></p>
            <p><a href="#">中型雕塑</a></p>
            <p><a href="#">限定手办</a></p>
            <p><a href="#">迷你手办</a></p>
            <p><a href="#">手办</a></p>
            <p><img src="img/霞.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="#"> 服饰毛绒</a>

          <div class="hide1">
            <p><a href="#">毛绒玩偶</a></p>
            <p><a href="#">卫衣&夹克</a></p>
            <p><a href="#">T恤</a></p>
            <p><a href="#">K/DA服饰</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/佐伊111.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="Life.html"> 生活周边</a>

          <div class="hide1 ">
            <p><a href="#">3C配件</a></p>
            <p><a href="#">日常用品</a></p>
            <p><a href="#">海报艺术</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/哥哥.webp" alt=""></p>
          </div>
        </li>
        <li><a href="Brand.html"> 品牌联名</a></li>
        <li class="show"><a href="Promotion.html"> 促销专区</a>

          <div class="hide1 hide2">
            <p><a href="#">LPL系列专区</a></p>
            <p><img src="img/didi.webp" alt=""></p>
          </div>
        </li>
        <li><a href="#"> 手办收藏</a></li>
      </ul>
      <ul>
        <li>

          <input type="text" placeholder="洛与霞雕塑"><span></span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 联系客服 -->

  <div class="spr-service">
    <p></p>
    <p>联系客服</p>
  </div>


  <!-- 雕塑手办 -->
  <div class="relative-shouban">
    <div class="shouban">
      <a href="index.html">商城首页</a>
      <span>></span>
      <a href="#">毛绒玩具</a>
    </div>

    <div class="bg-shouban">
      <img src="img/毛绒.png" alt="">
    </div>

    <div class="column-main">
      <div class="main-left">
        <ul>
          <li><a href="#">服饰毛绒</a></li>
          <li><a href="#">毛绒玩偶</a></li>
          <li><a href="#">其他</a></li>
          <li><a href="#">T恤</a></li>
          <li><a href="#">卫衣&夹克</a></li>
          <li><a href="#">赛事服饰</a></li>






        </ul>

        <ul>
          <li><a href="#"> 价格</a></li>
          <li><a href="#">100-300元</a></li>
          <li><a href="#"> 300元以上</a></li>
        </ul>

        <ul>
          <li><a href="#"> 英雄</a></li>
          <li><a href="#">上单</a></li>
          <li><a href="#">中单</a></li>
          <li><a href="#">ADC</a></li>
          <li><a href="#">辅助</a></li>
          <li><a href="#">打野</a></li>
          <li><a href="#">坦克</a></li>
          <li><a href="#">法师</a></li>
          <li><a href="#">刺客</a></li>
        </ul>
      </div>

      <div class="main-right">

        <div class="main-renqi">
          <ul>
            <li>
              <select name="" id="">
                <option value="">人气</option>
                <option value="人气">销量</option>
                <option value="人气">新品</option>
                <option value="人气">价格升序</option>
                <option value="人气">价格降序</option>
              </select>
              <input type="checkbox" checked="checked">仅显示有货
            </li>
            <li>
              <input type="button" value="上一页">
              <input type="button" value="1" class="renqi-active">
              <input type="button" value="2">
              <input type="button" value="3">
              <input type="button" value="4">
              <input type="button" value="5">
              <input type="button" value="下一页">

            </li>
          </ul>
        </div>

        <div class="lists">
          <ul>
            <!-- <li> 
              <p><img src="" alt=""></p>
              <p></p>
              <p></p>
            </li> -->

          </ul>
        </div>

        <div class="main-renqi">
          <ul>
            <li></li>
            <li>
              <input type="button" value="上一页">
              <input type="button" value="1" class="renqi-active">
              <input type="button" value="2">
              <input type="button" value="3">
              <input type="button" value="4">
              <input type="button" value="5">
              <input type="button" value="下一页">

            </li>
          </ul>
        </div>
      </div>
    </div>


    <!-- footer -->

    <footer>
      <div class="footer-top">
        <p><a href=""><span>7</span> 7天无理由退换货</a></p>
        <p><a href=""><span>正</span>100%官方正品</a></p>
        <p><a href=""><span>免</span>全场每单满299元包邮</a></p>

      </div>

      <div class="footer-main">
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
        <dl>
          <dt><a href="">购物指南</a></dt>
          <dd><a href="">帐号注册与登录</a></dd>
          <dd><a href="">购买流程介绍</a></dd>
          <dd><a href="">支付方式</a></dd>
          <dd><a href="">常见问题</a></dd>
        </dl>
      </div>

      <div class="footer-ab">
        <ul>
          <li> 关于商城 </li>
          <li> 服务条款 </li>
          <li> 合作伙伴 </li>
          <li> 法律声明 </li>
          <li> 经营者证照信息 </li>
        </ul>
      </div>

      <div class="footer-text">
        <ul>
          <li>
            <span></span>
            <span></span>
          </li>
          <li>
            北京京东世纪贸易有限公司提供客服支持 | 售后服务： https://wj.qq.com/s2/9280963/12ea
            Copyright (C) 1998 – 2018 Tencent. All Rights Reserved.腾讯公司 版权所有
          </li>
          <li>
            <img src="img/工商.png" alt="">
          </li>
        </ul>
      </div>
    </footer>

  </div>

   <!-- login -->
   <div class="box-log">
    <div class="box-position">
      <ul class="log-top">
        <li class="log-top-active">QQ账号登录</li>
        <li id="w-99">微信账号登录</li>
      </ul>
      <ul class="log-main">
        <li class="log-main-active">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p>推荐使用快速安全登录，防止盗号。</p>
          <div class="login-qq">
            <input type="text" id="user" placeholder="账号"><span class="s1"></span><br>
            <input type="text" id="pawd" placeholder="密码"><span class="s2"></span><br>
            <input type="button" value="授权登录" id="btn">
          </div>
          <p class="fool-text">
            <a href="">忘记密码</a>
            <a href="register.html">注册新账号</a>
            <a href="" class="last">意见反馈</a>
          </p>
        </li>
        <li class="erweima">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p><img src="img/er.jpg" alt=""></p>
          <p>微信扫一扫</p>
          <p>“聚诚品”</p>
        </li>
      </ul>

    </div>
  </div>
  <script src="js/axios.js"></script>
  <script src="js/jq.js"></script>
  <script src="js/login-ti.js"></script>
  <script src="js/islogin.js"></script>\
  <script src="js/hover.js"></script>
  <script>

    let url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=9&pagenum=0"

    axios.get(url, {
      params: {
        uid: 96839
      }
    })
      .then((res) => {

        console.log(res.data.data)
        let listArr = res.data.data.map((v) => `
        <li> 
              <a href="productDetails.html?pid=${v.pid}">
              <p><img src="${v.pimg}" alt=""></p>
              <p>${v.pname}</p>
              <p>${v.pprice}</p>
              </a>
        </li>
      `)

        document.querySelector('.lists ul').innerHTML = listArr.join('');
      })
  </script>

</body>

</html>